<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="<%=basePath %>leyuiyc/css/font.css">
        <link rel="stylesheet" href="<%=basePath %>leyuiyc/css/xadmin.css">
        <script src="<%=basePath %>leyuiyc/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="<%=basePath %>leyuiyc/js/xadmin.js"></script>
		<style>
		    /* body{overflow-y: scroll;} */ /* 禁止刷新后出现横向滚动条 */
		    /* .layui-table-body .layui-table,.layui-table-header .layui-table{width: 100%;}
			.layui-table-body.layui-table-main .layui-table-cell,.layui-table-header .layui-table-cell{white-space: pre-wrap;word-wrap: break-word; word-break: break-all; height: auto;} */
		</style>
        <script src="<%=basePath %>leyuiyc/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="<%=basePath %>leyuiyc/js/xadmin.js"></script>
		
    </head>
    
    <body>
        
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input type="text" name="userName" placeholder="申请人姓名" autocomplete="off" class="layui-input"></div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input type="text" name="supplierName" placeholder="供应商名称" autocomplete="off" class="layui-input"></div>
                                <div class="layui-input-inline layui-show-xs-block" >
                                    <select name="status">
                                        <option value="">状态</option>
                                        <option value="0">未提交</option>
                                        <option value="10">已提交</option>
                                        <option value="20">已确认</option>
                                        <option value="30">已到货</option>
                                        <option value="40">已退货</option>
                                        <option value="50">申请退货</option>
                                        </select>
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="申请开始日期" name="start" placeholder="yyyy-MM-dd HH:mm:ss" id="start">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="申请结束日期" name="end" placeholder="yyyy-MM-dd HH:mm:ss" id="end">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-body ">
                            <table class="layui-table layui-form" id="test" lay-filter="test">
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
    
    <script>
			layui.use(['table','form','jquery','laydate','layer'], function(){
			  var table = layui.table,
			  laydate = layui.laydate,
			  layer = layui.layer,
			  form = layui.form ;
			  //执行一个laydate实例
		        laydate.render({
		          elem: '#start' //指定元素
		          ,type: 'datetime'
		        });
		
		        //执行一个laydate实例
		        laydate.render({
		          elem: '#end' //指定元素
		          ,type: 'datetime'
		        });
			  table.render({
			    elem: '#test'
			    ,url:'selectPurchasing.do'
			    ,width: 'auto'
			    ,height: 650
			    ,method: 'post'
			    ,toolbar: '#toolbarDemo'
			    ,title: '订单信息表'
			    ,totalRow: true
			    ,page: true
			    ,cols: [[
			      {type:'checkbox', fixed: 'left'}
			      ,{field:'i', width:100, title: '序号', fixed: 'left',type:'numbers'}
			      ,{field:'purchaseId', width:260, title: '采购单编号id'}
			      ,{field:'userName', width:260, title: '申请人名字'}
			      ,{field:'supplierName', width: 260, title: '供应商名称'}
			      ,{field:'status', width:100, title: '状态',toolbar:'#state'}
			      ,{field:'createTime', width:260, title: '创建时间'}
			      ,{field:'', width:350, title: '操作', fixed: 'right',toolbar:'#operation'}
			    ]]
			    ,even:true
			    ,skin: 'row' //表格风格
                ,limits:[10,20,30,40,50]
			    ,limit: 20 //每页默认显示的数量
			  });
			  //数据筛选
		        form.on('submit(search)',function(data){
		            //执行重载
		            table.reload('test', {
		                where:data.field,
		                	page : {
								curr : 1 //从第一开始查看
						}
		            });
		            return false;
		        });
    		//批量删除时
    		table.on('toolbar(test)', function(obj) {
    			var checkStatus = table.checkStatus(obj.config.id);
    			switch (obj.event) {
    			case 'delAll':
    				var data = checkStatus.data;
    				if (data.length != 0) {
    					var id = "";
    					for (var i = 0; i < data.length; i++) {
    						if(data[i].status<30){
    							id += data[i].purchaseId + ",";
    						}else{
    							layer.msg('不能删除已到货的订单', {
    									icon : 2
    								});
    								return;
    						}
    						
    					}
    					layer.confirm('真的删除行么', {
    						btn : [ '确定', '取消' ] //按钮
    					}, function(index) {
    						AJAX("deletePurchasing.do", id)
    						layer.msg('删除成功', {
    							icon : 1
    						});
    						table.reload('test', {
    							page : {
    								curr : 1 //从第一开始查看
    							}
    						});
    					}, function(index) {
    						layer.close(index);
    					})
    
    				} else {
    					layer.msg('请选择要删除的目标', {
    						icon : 2
    					})
    				}
    				break;
    			case 'add':
    				var index0 = layer.open({
    					type : 2,
    					title : '增加采购单',
    					maxmin : true,
    					area : [ '1100px', '700px' ], //弹出框大小
    					content : "goAddTvPurchase.do",
    					end : function() {
    					}
    				});
    				console.log(index0)
    				break;
    			}
    		});
    		/* 操作框操作 */
    		table.on('tool(test)', function(obj) {
    			var data = obj.data;
    			if (obj.event === 'delete') {
    				layer.confirm('真的删除行么', function(index) {
    				if(data.status<30){
    					$.ajax({
    						url : "deletePurchasingCz.do?id=" + data.purchaseId,
    						method : "post",
    						dataType : "json",
    						contentType : "application/json;charset=utf-8",
    						success : function(data) {
    							if (data != null) {
    								layer.msg('删除成功', {
    									icon : 1
    								});
    								return;
    							}
    							return;
    						}
    					})
    					obj.del();
    					layer.close(index);
    				}else{
    					layer.msg('不能删除已到货的', {
    						icon : 2
    					})
    				}
    					
    					
    				});
    			} else if (obj.event === 'confirm') {
    				console.log(data.purchaseId)
    				if (data.status == 10) {
    					$.ajax({
    						url : "confirmPurchasing.do?purchaseId=" + data.purchaseId,
    						method : "post",
    						dataType : "json",
    						contentType : "application/json;charset=utf-8",
    						success : function(data) {
    							if (data != null) {
    								layer.msg('确认成功', {
    									icon : 1
    								});
    								table.reload('test', {
    									page : {
    										curr : 1 //从第一开始查看
    									}
    								});
    								return;
    							}
    							return;
    						}
    					})
    				} else {
    					layer.msg('请选择状态为已提交的', {
    						icon : 5
    					})
    				}
    
    			}else if(obj.event === 'detail'){
    				var url = "goPurchasingDetailsList.do?purchaseId="+ data.purchaseId;
    				layer.open({
    					type : 2,
    					title : '采购单详情',
    					maxmin : true,
    					area : [ '1500px', '800px' ], //弹出框大小
    					content : url,
    					end : function() {}
    				});
    			}
    			else if(obj.event === 'update'){
    				var url = "goPurchasingDetailsListUpdate.do?purchaseId="+ data.purchaseId;
    				layer.open({
    					type : 2,
    					title : '修改采购数量',
    					maxmin : true,
    					area : [ '1500px', '800px' ], //弹出框大小
    					content : url,
    					end : function() {}
    				});
    			}
    		});
    
    	});
    	//封装AJAX请求
    	function AJAX(url,data){
		       		$.ajax({
                    	url:url,
                    	method:"post",
                    	dataType:"json",
                    	data:data,
                    	contentType:"application/json;charset=utf-8",
                    	success:function(data){
                    		if(data != null){
                    			layer.msg('删除成功', {icon: 1});
                    			return;
                    		}
                    		return;
                    	}
                    	})
		       } 
			
	</script>
	<script type="text/html" id="state">	
	   {{#  if(d.status == "0") {  }}
			<font color="#00ff00">未提交</font>
		{{#  } else if(d.status == "10") {  }}
			<font color="#00FA9A">已提交</font>
         {{#  } else if(d.status == "20") {  }}
			<font color="#00EE00">已确认</font>
		{{#  } else if(d.status == "30") {  }}
			<font color="#00B2EE">已到货</font>
		{{#  } else if(d.status == "40") {  }}
			<font color="#008B00">已退货</font>
		{{#  } else if(d.status == "50") {  }}
			<div><font color="#0000FF">申请退货</font></div>
		{{#  }  }}
    </script>
    <script type="text/html" id="operation">	
	   <a lay-event="detail"><button type="button" class="layui-btn layui-btn-normal">采购单详情</button></a>
       <a lay-event="confirm"><button type="button" class="layui-btn layui-btn-danger">确认采购单</button></a>
	   <a lay-event="update"><button type="button" class="layui-btn layui-btn-normal">修改采购数量</button></a>
	   <a lay-event="delete"><button type="button" class="layui-btn layui-btn-danger">删除</button></a>
    </script>
   <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button lay-event="add" class="layui-btn" ><i class="layui-icon"></i>新增采购单</button>
        <button  lay-event="delAll"  class="layui-btn layui-btn-danger"><i class="layui-icon">&#xe640;</i>批量删除采购单</button>
      </div>
  </script>

</html>